<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    
    <div class="section-header">在招岗位学历要求</div>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
    <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_JobTable_Education_JobSeeker } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      listData: null,
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      get_JobTable_Education_JobSeeker(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.listData = data;
    //     let newData = [];
    //     if(data.length>0){
    //       let objKey = Object.keys(data[0]).forEach(k=>{
    //         newData.push({
    //           name: k,
    //           value: data[0][k]
    //         })
    //       });
    //     }
    //     this.listData = newData;
    //     debugger
		// // this.listData = data;
        this.drawChart();
      });
    },
    drawChart() {
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '学历要求',
                  type: 'pie',
                  label:{
                      formatter: '{b}:{d}%',
                  },
                  radius: ['35%','55%'],
                  center: ['50%', '50%'],
                  data: this.listData,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  },
                  color: ['#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#32c5e9','#37a2da'],
              }
          ]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
</style>